<template>
  <div class="home animate__animated animate__fadeInUp">
    <div id="Product_Category">
      <p id="Product_Category2">
        <span id="Product_Category3">商品分类</span>
      </p>
    </div>
    <el-card shadow="never">
      <div id="ProducFrom" class="flex">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <!-- 商品名称/编号 -->
          <el-form-item label="">
            <el-input
              v-model="formInline.key_word"
              placeholder="标题关键词"
            ></el-input>
          </el-form-item>

          <!-- 查询 -->
          <el-form-item>
            <el-button id="product_query" type="primary" @click="search"
              >查询</el-button
            >
          </el-form-item>

          <!-- 添加商品 -->
          <!-- <el-form-item> -->
          <el-button
            id="add_product"
            type="add"
            @click="dialogFormVisible_add = true"
            >添加</el-button
          >
          <!-- 商品分类，编辑添加弹框 -->
          <el-dialog
            title="确认提示"
            :visible.sync="dialogFormVisible_add"
            width="40%"
            :append-to-body="true"
          >
            <el-form :model="form">
              <el-form-item label="分类名称 :" :label-width="formLabelWidth">
                <el-input
                  v-model="form.add_product_name"
                  autocomplete="off"
                  placeholder="输入分类名称"
                ></el-input>
              </el-form-item>
              <el-form-item label="分类编号 :" :label-width="formLabelWidth">
                <el-input
                  v-model="form.add_product_number"
                  autocomplete="off"
                  placeholder="输入分类编号"
                ></el-input>
              </el-form-item>
              <el-form-item label="是否启用 :" :label-width="formLabelWidth">
                <el-radio-group v-model="add_radio">
                  <el-radio :label="1">启用</el-radio>
                  <el-radio :label="2">关闭</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="add_product_f">取 消</el-button>
              <el-button type="primary" @click="add_product_t">保存</el-button>
            </div>
          </el-dialog>
          <!-- </el-form-item> -->
        </el-form>
      </div>

      <!-- 商品表格 -->
      <div>
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          @selection-change="handleSelectionChange"
          style="width: 100%"
          ref="multipleTable"
          :header-cell-style="{
            background: 'RGB(238, 239, 246, 0.34)',
            color: '#606266',
          }"
          border
        >
          <el-table-column
            type="selection"
            v-model="checked"
            width="55"
            align="center"
          >
          </el-table-column>
          <el-table-column fixed prop="name" label="分类名称" align="center">
          </el-table-column>
          <el-table-column prop="number" label="分类编号" align="center">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            header-align="center"
            align="center"
          >
          </el-table-column>

          <!-- 操作 -->
          <el-table-column label="操作" align="center">
            <!-- 商品编辑按钮 -->
            <template slot-scope="scope">
              <el-button type="text" @click="oppenEdit(scope.row)"
                >编辑</el-button
              >
              <!-- 商品删除按钮 -->
              <el-button
                type="text"
                @click.native.prevent="del(scope.$index, tableData)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 商品分类，编辑添加弹框 -->
        <el-dialog
          title="确认提示"
          :visible.sync="dialogFormVisible_edit"
          width="40%"
          :append-to-body="true"
        >
          <el-form :model="form">
            <el-form-item label="分类名称 :" :label-width="formLabelWidth">
              <el-input
                v-model="form.edit_product_name"
                autocomplete="off"
                placeholder="输入分类名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="分类编号 :" :label-width="formLabelWidth">
              <el-input
                v-model="form.edit_product_number"
                autocomplete="off"
                placeholder="输入分类编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="是否启用 :" :label-width="formLabelWidth">
              <el-radio-group v-model="edit_radio">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="2">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="edit_product_f">取 消</el-button>
            <el-button type="primary" @click="edit_product_t">保存</el-button>
          </div>
        </el-dialog>

        <div class="table_footer">
          <!-- <el-row> -->
          <el-row>
            <el-col :span="2">
              <div class="grid-content bg-purple">
                 <el-button  @click="toggleInverseAllSelection()" >反选</el-button>
              </div>
              </el-col>
              <el-col :span="3">
              <el-button @click="toggleSelection()">取消选择</el-button>
            </el-col>
            <el-col :span="5"
              ><div class="grid-content bg-purple-light">
                <el-select v-model="value" placeholder="批量操作" clearable  @change="change1">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    
                  >
                  </el-option>
                </el-select></div
            ></el-col>

            <el-col :span="2"
              ><div class="grid-content bg-purple" @click="select_submit" >
                <el-button>确定</el-button>
              </div></el-col
            >

            <p class="paging">
              <el-col :span="15"
                ><div class="grid-content bg-purple-light">
                  <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="size"
                    :total="total"
                    @current-change="change"
                    @prev-click="prev"
                    @next-click="next"
                  >
                  </el-pagination></div
              ></el-col>
            </p>
          </el-row>
        </div>
      </div>
    </el-card>
  </div>
</template>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

.flex {
  display: flex;
}
#select_all {
  margin-left: -15px;
}
#Product_Category {
  width: 100%;
  height: 49px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #333333;
  display: flex;
  background: -webkit-linear-gradient(
    0deg,
    rgba(81, 81, 81, 1) 0%,
    rgba(81, 81, 81, 1) 0%,
    rgba(174, 174, 174, 1) 100%,
    rgba(174, 174, 174, 1) 100%
  );
  #Product_Category2 {
    display: flex;
    align-items: center;
    span {
      align-items: center;
      padding-left: 10px;
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
      color: #999999;
      border-left: rgba(30, 159, 255, 1) solid 4px;
      margin-left: 10px;
      font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
    }
  }
}

// 商品表单的表单css
#ProducFrom {
  .el-form-item {
    margin-right: 30px;
    #product_query {
      margin-left: -10px;
    }
    #add_product {
      margin-left: -10px;
    }
  }
}

// 商品表格的表格css
.table_footer {
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin-top: 10px;
  align-items: center;
  .paging {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0;
    .grid-content {
      align-items: center;
      .el-pagination {
        margin-top: 10px;
        height: 50px;
        line-height: 50px;
      }
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      //分页
      page: 1,
      size: 5,
      total: 0,
      // 添加模态框的单选框默认为1
      add_radio: "",
      edit_radio: "",
      Edit_id: "",
      value: "",
      // 商品heard,from表单
      checked: false,
      formInline: {
        key_word: "",
        region: "",
      },

      // 选择商品分类
      options: [
        {
          value: "1",
          label: "开启",
        },
        {
          value: "2",
          label: "关闭",
        },
        {
          value: "3",
          label: "删除",
        },
      ],

// 批量选择status
      idArr:[],
      batch:"",

      // 表格数据
      tableData: [
        {
          Product_category: "哑铃",
          Category_number: "1",
          state: "开启",
        },
      ],
      multipleSelection: [],
      isIndeterminate: false,
      // 编辑添加弹框
      form: {
        add_product_name: "", //分类名称
        add_product_number: "", //分类编号
        edit_product_name: "",
        edit_product_number: "",
      },
      formLabelWidth: "100px",
      // 编辑添加
      dialogFormVisible_add: false,
      dialogFormVisible_edit: false,
    };
  },
  methods: {
// 反选，重新遍历一遍数据
    toggleInverseAllSelection(val){
      this.tableData.forEach((item) => {
        this.$refs.multipleTable.toggleRowSelection(item);
       
      });
       console.log(this.tableData);
    },

    // 表格全选
    toggleSelection(rows) {
      console.log(rows);
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });

      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
// 全选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },

// 批量操作选择器
    change1(index){
      //  console.log(index);
       this.batch=index;
       console.log(this.batch);
    },

// 根据id批量删除修改商品
    select_submit(){
      this.idArr=this.multipleSelection.map(item=>item.id)
      console.log(this.idArr.toString());
      if(this.idArr.toString()!==""){
          if(this.batch==""){
            this.$message.error('请选批量择操作方式');
          }else{
                if(this.batch==1||this.batch==2){
                this.$axios({
                url:"/gym/sort/updateStatusByIds",
                method:"post",
                data:{
                  ids:this.idArr.toString(),
                  status:this.batch
                }
              }).then((res)=>{
                // console.log(res);
                console.log(this.batch);
                if(res.data.error){
                  this.$message.erro(res.data.error);
                }else{
                  if(this.batch==1){
                      this.$message({ 
                        type: "success",
                        message: "批量操作开启成功!",
                    });
                    this.getCon();
                  }else if(this.batch==2){
                      this.$message({ 
                        type: "success",
                        message: "批量操作关闭成功!",
                    });
                    this.getCon();
                  }
                }
              })
            }else if(this.batch=3){
              this.$axios({
                url:"/gym/sort/deleteByIds",
                method:"post",
                data:{
                  ids:this.idArr.toString(),
                }
              }).then((res)=>{
                if(res.data.error){
                  this.$message.erro(res.data.error);
                }else{
                  this.$message({ 
                        type: "success",
                        message: "批量删除成功!",
                    });
                    this.getCon();
                }
              })
            }
          }
      }else{
       this.$message.error('请选择商品');
     }
    },


    // 编辑添加弹框取消
    add_product_f() {
      (this.form.add_product_name = ""),
        (this.form.add_product_number = ""),
        (this.add_radio = "");
      this.dialogFormVisible_add = false;
    },
    // 编辑添加弹框取消
    add_product_t() {
      this.$axios({
        url: "/gym/sort/add",
        method: "post",
        data: {
          name: this.form.add_product_name,
          number: this.form.add_product_number,
          status: this.add_radio,
        },
      }).then((res) => {
        this.dialogFormVisible_add = false;
        console.log(res);
        this.getCon();
        (this.form.add_product_name = ""),
        (this.form.add_product_number = ""),
        (this.add_radio = "");
      });
    },

    // 编辑弹框取消
    edit_product_f() {
      this.form.edit_product_name = "";
      this.form.edit_product_number = "";
      this.edit_radio = "";
      this.dialogFormVisible_edit = false;
    },
    
    // 点击编辑按钮
    oppenEdit(row) {
      // console.log(row);
      this.form.edit_product_name = row.name;
      this.form.edit_product_number = row.number;
      this.edit_radio = Number(row.status);
      if(row.status=="开启"){
        this.edit_radio=1
      }else {
        this.edit_radio=2
      }
      // console.log(row.status);
      this.Edit_id = row.id;
      // console.log( this.Edit_id);
      this.dialogFormVisible_edit = true;
    },
    // 编辑弹框确定
    edit_product_t() {
      this.$axios({
        url: "/gym/sort/update",
        method: "post",
        data: {
          name: this.form.edit_product_name,
          number: this.form.edit_product_number,
          status: this.edit_radio,
          id: this.Edit_id,
        },
      }).then((res) => {
        this.tableData = res.data.data;
        this.dialogFormVisible_edit = false;
        console.log(res);
        this.getCon();
        (this.form.edit_product_name = ""),
          (this.form.edit_product_number = ""),
          (this.edit_radio = "");
      });
    },

    // 表格操作删除
    del(index, data) {
      console.log(index, data);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios({
            url: "/gym/sort/delete",
            params: {
              id: data[index].id,
            },
          }).then((res) => {
            console.log(res);
            if (res.data.error) {
              this.$message.erro("删除失败");
            } else {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getCon();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //分类表渲染
    getCon() {
      this.$axios({
        url: "/gym/sort/list",
        params: {
          page: this.page,
          limit: this.size,
        },
      }).then((res) => {
        this.tableData = res.data.data;
        if (res.data.count != null) {
          this.total = res.data.count;
        }
        console.log(this.tableData);
        for(let i=0;i<this.tableData.length;i++){
          if(this.tableData[i].status == "2"){
            this.tableData[i].status="关闭"
          }else{
            this.tableData[i].status="开启"
          }
        }
      });
    },
    change(page) {
      this.page = page;
      this.getCon();
    },
    prev() {
      this.page--;
      this.getCon();
    },
    next() {
      this.page++;
      this.getCon();
    },
    // 查询
    search() {
      this.$axios({
        url: "//gym/sort/list",
        params: {
          name: this.formInline.key_word,
          // id:this.formInline.key_word,
          // sort_id:this.formInline.key_word,
          // status:this.formInline.key_word,
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.data;
        this.formInline.key_word = "";
      });
    },
    // 添加
  },
  mounted() {
    this.getCon();
  },
};
</script>